<template>
  <el-select
    popper-class="custom-option-popper"
    v-model="mValue[item.field_id]"
    placeholder="请选择"
    style="width: 100%;"
    no-data-text="没有数据"
    no-match-text="没有匹配数据"
    clearable
    :multiple="true"
    :filterable="true"
  >
    <!-- <template #header> 2.4.3版本新加，当前2.3.3不可用
      <el-checkbox
        v-model="item.checkAll"
        :indeterminate="item.indeterminate"
        @change="(val) => onCheckAll(val, item)"
      >全选</el-checkbox>
    </template> -->
    <el-option
      v-for="(opt, o) in item.options"
      :key="o"
      :label="opt[item.optionName || 'label']"
      :value="opt[item.optionId || 'value']"
    >
      <!-- <span style="float: left">{{ opt.label }}</span>
      <span style=" float: right; color: var(--el-text-color-secondary); font-size: 13px;">{{ opt.value }}</span> -->
      <div>
        <div class="custom-option-wrap">
          <div class="name">{{ opt.customer_name }}</div>
          <div class="phone">{{ opt.phone }}</div>
        </div>
        <div class="openid">{{ opt.customer_id }}</div>
      </div>
    </el-option>
  </el-select>
  <el-checkbox
    class="all-check"
    v-model="item.checkAll"
    :indeterminate="item.indeterminate"
    @change="(val) => onCheckAll(val, item)"
  >全选</el-checkbox>
</template>

<script setup>
import { ref, watch, } from 'vue'

const props = defineProps(['mValue', 'ruleForm', 'item', ])

watch(() => props.mValue.members, (newVal, oldVal) => {
  props.ruleForm.members = [ ...newVal, ]

  let len = newVal.length
  if(len === 0) {
    props.item.checkAll = false
    props.item.indeterminate = false
  } else if(len === props.item.options.length) {
    props.item.checkAll = true
    props.item.indeterminate = false
  } else {
    props.item.indeterminate = true
  }
})

// 全选
function onCheckAll(val, item) {
  item.indeterminate = false
  let { field_id, options, optionId, optionName, } = item
  if(val) {
    props.mValue[field_id] = options.map(opt => opt[optionId])
  } else {
    props.mValue[field_id] = []
  }
}

</script>

<style lang='less'>
.custom-option-popper {
  .el-select-dropdown__item {
    height: unset !important;

    &.selected .openid{
      color: var(--el-color-primary);
    }
  }
}
.custom-option-wrap {
  display: flex;
  flex-wrap: wrap;
  font-size: 13px;
  line-height: 32px !important;

  >.name {
    flex: 1;
  }
  >.phone {
    flex: 1;
    text-align: right;
  }
}
</style>